<template>
  <div id="home">
<!--    轮播组件-->
   <div class="swiper">
     <van-swipe :autoplay="3000" indicator-color="red">
       <van-swipe-item v-for="(image, index) in images" :key="index">
         <img v-lazy="image" />
       </van-swipe-item>
     </van-swipe>
   </div>

<!--    宫格组件-->
    <div class="grid">
      <van-grid>
        <van-grid-item :icon="v.icon" :text="v.text" v-for="(v,k) in girds" :key="k" :to="v.router"/>
      </van-grid>
    </div>
  </div>



</template>

<script>
    import { Swipe,SwipeItem,Grid, GridItem } from "vant"
    export default {
        name: "Home",
        data(){
          return {
              images: [
                  'https://img.yzcdn.cn/vant/apple-1.jpg',
                  'https://img.yzcdn.cn/vant/apple-2.jpg',
                  'https://img.yzcdn.cn/vant/apple-3.jpg',
                  'https://img.yzcdn.cn/vant/apple-4.jpg',
              ],
              girds:[
                  {text:'最新商品',icon:'new',router:{name:'goods'}},
                  {text:'vip办理',icon:'vip-card',router:{name:'vip'}},
                  {text:'会员趣事',icon:'smile',router:{name:'enjoy'}},
                  {text:'收藏',icon:'star',router:{name:'collection'}},
                  {text:'反馈问题',icon:'coupon',router:{name:'problem'}},
                  {text:'新闻资讯',icon:'comment',router:{name:'news'}},
                  {text:'礼品兑换',icon:'gift',router:{name:'gift'}},
                  {text:'联系客服',icon:'service',router:{name:'servicer'}}
              ]
          }
        },
        components:{
            [Swipe.name]:Swipe,
            [SwipeItem.name]:SwipeItem,
            [Grid.name]:Grid,
            [GridItem.name]:GridItem
        },
        methods: {

        }
    }
</script>

<style scoped>
    .swiper {
      height: 250px;
    }
    .swiper img {
      width: 100%;
      height: 250px;
    }
</style>
